<template>
  <teleport to="#modelLogin">
    <el-dialog
      v-model="visible"
      @close="onDialogClose"
      :close-on-click-modal="false"
      :show-close="false"
      :width="width"
    >
      <slot></slot>
    </el-dialog>
  </teleport>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from "vue";

const props = defineProps<{
  // title: string;
  initVisible: boolean;
  width: number;
}>();

const emit = defineEmits(["update:visible"]);

const visible = ref(props.initVisible);

const onDialogClose = () => {
  emit("update:visible", false);
};

// 如果需要观察prop的变化，可以使用watch
watch(
  () => props.initVisible,
  (newVal, oldVal) => {
    // console.log(newVal, oldVal, "!11");
    visible.value = newVal;
  }
);
</script>
